<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('运费')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<style>
    .se{
        width: 30%;
        float: left;
        margin: 5px 5px 5px 5px;
    }

    .ina{
        width: 60%;
        float: left;
        text-align: center;
        margin: 5px 5px 5px 5px;
    }

</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
                    <form class="form-horizontal m-t" id="supplyCard">
                        <input id="id"  name="id" hidden="hidden" th:value="${supplyCardDto.id}">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">产品类型：</label>
                                <div class="col-sm-9">
                                    <input type="text" name="" class="form-control"  th:value="${supplyCardDto.className}" readonly >
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">产品分类：</label>
                                <div class="col-sm-9">
                                    <input type="text" name="" class="form-control"  th:value="${supplyCardDto.typeName}" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">供应卡类型：</label>
                                <div class="col-sm-9">

                                        <label class="checkbox-inline check-box" for="supplyType0">
                                            <input type="checkbox" value="0" id="supplyType0" name="supplyType" class="typeChange">二月卡
                                        </label>
                                        <label class="checkbox-inline check-box" for="supplyType1">
                                            <input type="checkbox" value="1" id="supplyType1" name="supplyType" class="typeChange">季卡
                                        </label>
                                        <label class="checkbox-inline check-box" for="supplyType2">
                                            <input type="checkbox" value="2" id="supplyType2" name="supplyType" class="typeChange">半年卡
                                        </label>
                                        <label class="checkbox-inline check-box" for="supplyType3">
                                            <input type="checkbox" value="3" id="supplyType3" name="supplyType" class="typeChange">年卡
                                        </label>
                                    <button type="button" class="btn btn-primary" onclick="createBody()">生成规格</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <table id="supplyProduct" class="table table-hover margin bottom">
                                    <thead>
                                    <tr>
                                        <th>名称</th>
                                        <th>价格</th>
                                        <th>单价</th>
                                        <th>类型</th>
                                        <th>周期</th>
                                        <th>总量</th>
                                        <th>备注</th>
                                        <th>配送</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </form>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">

    var supplyType = [[${supplyCardDto.supplyTypes}]];
    for(s in supplyType){
        $("#supplyType"+supplyType[s].type).attr("checked","checked");
    }

    var index=0;
    var sendNum = []
    var supplyCardProducts = [[${supplyCardDto.supplyCardProducts}]];
    for(s in supplyCardProducts){
        console.log(supplyCardProducts[s])
        sendNum[s] = [s*10000];
        var name;
        switch (supplyCardProducts[s].type){
            case 0: name = "二月卡"; break;
            case 1: name = "季卡"; break;
            case 2: name = "半年卡"; break;
            case 3: name = "年卡"; break;
            default: name=""
        }
        var notes="";
        if(supplyCardProducts[s].notes!=null){
            notes = supplyCardProducts[s].notes
        }
        var str = "<tr>"
        //循环已存在的供应卡规格值
        str+="<td><input style='width: 55px'  name='supplyCardProducts["+index+"].name' value='"+supplyCardProducts[s].name+"' /></td>"
        str+="<td><input style='width: 55px'  name='supplyCardProducts["+index+"].price' value='"+supplyCardProducts[s].price+"' /></td>"
        str+="<td><input style='width: 55px'  name='supplyCardProducts["+index+"].priceOne' value='"+supplyCardProducts[s].priceOne+"' /></td>"
        str+="<td><input style='width: 55px'  name='type' value='"+name+"' readonly/><input name='supplyCardProducts["+index+"].type' hidden='hidden' value='"+supplyCardProducts[s].type+"'></td>"
        str+="<td><input style='width: 55px'  name='supplyCardProducts["+index+"].sumDay' value='"+supplyCardProducts[s].sumDay+"' /></td>"
        str+="<td><input style='width: 55px'  name='supplyCardProducts["+index+"].total' value='"+supplyCardProducts[s].total+"' /></td>"
        str+="<td><input style='width: 55px'  name='supplyCardProducts["+index+"].notes' value='"+notes+"' /></td>"
        str+="<td><div style='width: 95px' id='sends"+s+"' value='' ></div><input id='sendsText"+s+"' hidden='hidden' name='supplyCardProducts["+index+"].sends'></td>"
        str+="<td><button id='"+sendNum[s]+"' type=\"button\" class=\"btn btn-primary\" onclick=\"createSend("+s+")\">生成配送</button></td>"
        str+="</tr>"
        $("#supplyProduct tbody").append(str);
        var supplyCardProducts = [[${supplyCardDto.supplyCardProducts}]];
        for(k in supplyCardProducts[s].sendList){
            $("#sends"+s).append("<div name='sends' id='"+sendNum[s][0]+"'  >"+supplyCardProducts[s].sendList[k].name+"<i style='float: right;padding-top: 4px;'class='fa fa-close' onclick='delSend("+sendNum[s][0]+","+s+")' ></i></div>")
            sendNum[s][0]++
            $("#sendsText"+s).val($("#sendsText"+s).val()+" "+supplyCardProducts[s].sendList[k].name+" ")
        }
        index++
    }



</script>
<script type="text/javascript">
    var prefix = ctx + "system/card";
    $("#supplyCard").validate({
        focusCleanup: true
    });

    var sendNum = [];

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/goSupplyCard", $('#supplyCard').serialize());
        }
    }


    function createBody() {
        var index=0;
        //清空表格中的数据
        $("#supplyProduct tbody").html("");

        $("input[name='supplyType']:checked").each(function(i) {
            sendNum[i] = [i*10000];
            var name;
            switch ($(this).val()){
                case "0": name = "二月卡"; break;
                case "1": name = "季卡"; break;
                case "2": name = "半年卡"; break;
                case "3": name = "年卡"; break;
                default: name=""
            }
            //生成表格
            var str = "<tr>"
            //循环已存在的供应卡规格值
            str+="<td><input style='width: 55px' name='supplyCardProducts["+index+"].name' value='"+name+"' /></td>"
            str+="<td><input style='width: 55px' name='supplyCardProducts["+index+"].price' value='0' /></td>"
            str+="<td><input style='width: 55px' name='supplyCardProducts["+index+"].priceOne' value='0' /></td>"
            str+="<td><input style='width: 55px' value='"+name+"' readonly/><input name='supplyCardProducts["+index+"].type' hidden='hidden' value='"+$(this).val()+"'></td>"
            str+="<td><input style='width: 55px' name='supplyCardProducts["+index+"].sumDay' value='0' /></td>"
            str+="<td><input style='width: 55px' name='supplyCardProducts["+index+"].total' value='0' /></td>"
            str+="<td><input style='width: 55px' name='supplyCardProducts["+index+"].notes' value='' /></td>"
            str+="<td><div style='width: 95px' id='sends"+i+"' value='' ></div><input id='sendsText"+i+"' hidden='hidden' name='supplyCardProducts["+index+"].sends'></td>"
            str+="<td><button type=\"button\" class=\"btn btn-primary\" onclick=\"createSend("+i+")\">生成配送</button></td>"
            str+="</tr>"
            $("#supplyProduct tbody").append(str);
            index++
        });



    }

    function createSend(i) {
        layer.open({
            type:1,
            area:['300px','200px'],
            shadeClose:true,//允许点击暗影处关闭
            btn:['确认','取消'],
            content:'次数:<input id="num"/><hr>数量:<input id="total"/>',
            title:'配送信息',
            yes: function (index,layero) {
                if(!sendNum[i]){
                    sendNum[i]=[i*10000]
                }
                var num = $("#num").val();
                var total = $("#total").val();
                $("#sends"+i).append("<div name='sends' id='"+sendNum[i][0]+"'  >"+num+"次/"+total+"瓶<i style='float: right;padding-top: 4px;'class='fa fa-close' onclick='delSend("+sendNum[i][0]+","+i+")' ></i></div>")
                $("#sendsText"+i).val($("#sendsText"+i).val()+" "+num+"次/"+total+"瓶 ")
                sendNum[i][0]++
                layer.close(index)
            },btn2: function (index,layero) {
            }
        })
    }
    function delSend(i,s) {
        $("#sendsText"+s).val($("#sendsText"+s).val().replace($("#"+i).text(),""))
        $("#" + i).remove();
    }
</script>
</body>
</html>
